<template>
  <el-menu
      class="user_center_side_bar"
      active-text-color="#703CF6"
      text-color="#000"
      @open="handlOpen"
      @close="handleClose"
      router
      id="s-b-el-menu"
  >
    <template #title>
      <!--        <span>个人中心</span>-->
      <!--      <h4>个人中心</h4>-->
    </template>

    <span>个人中心</span>
    <el-menu-item index="/nft" class="s-b-item" @mouseover="play(anim[0])" @mouseleave="stop(anim[0])">
      <div id="s-b-img1" class="s-b-img"/>
      NFT
    </el-menu-item>
    <el-menu-item index="/messageBox" class="s-b-item" @mouseover="play(anim[1])" @mouseleave="stop(anim[1])">
      <div id="s-b-img2" class="s-b-img"/>
      消息盒子
    </el-menu-item>
    <el-menu-item index="/sale" class="s-b-item" @mouseover="play(anim[2])" @mouseleave="stop(anim[2])">
      <div id="s-b-img3" class="s-b-img"/>
      我的在售
    </el-menu-item>
    <el-menu-item index="/tradeRecord" class="s-b-item" @mouseover="play(anim[3])" @mouseleave="stop(anim[3])">
      <div id="s-b-img4" class="s-b-img"/>
      交易记录
    </el-menu-item>
    <el-menu-item index="/feedbackForm" class="s-b-item" @mouseover="play(anim[4])" @mouseleave="stop(anim[4])">
      <div id="s-b-img5" class="s-b-img"/>
      查看反馈
    </el-menu-item>

  </el-menu>
</template>

<script>
import lottie from 'lottie-web'
import {defineElement} from 'lord-icon-element'
import * as gif1 from '@/assets/20-bookmark-outline-edited.json'
import * as gif2 from '@/assets/47-chat-outline-edited.json'
import * as gif3 from '@/assets/17-assignment-outline-edited.json'
import * as gif4 from '@/assets/70-ticket-outline-edited.json'
import * as gif5 from '@/assets/58-call-phone-outline-edited.json'

defineElement(lottie.loadAnimation)
export default {
  name: "side-bar",
  data() {
    return {
      anim: [],
    }
  },
  methods: {
    play(animation) {
      animation.play()
    },
    stop(animation) {
      animation.stop()
    }
  },
  mounted() {
    this.anim[0] = lottie.loadAnimation({
      container: document.getElementById("s-b-img1"),//当前需要渲染的DOM
      renderer: "svg",//渲染方式，默认为svg,还可以渲染为html和canvas
      loop: true,//循环播放
      autoplay: true,//自动播放
      // animationData和path二选一
      animationData: gif1.default,//本地动画
      //2. path:''//网络json地址
    })

    this.anim[1] = lottie.loadAnimation({
      container: document.getElementById("s-b-img2"),//当前需要渲染的DOM
      renderer: "svg",//渲染方式，默认为svg,还可以渲染为html和canvas
      loop: true,//循环播放
      autoplay: true,//自动播放
      // animationData和path二选一
      animationData: gif2.default,//本地动画
      //2. path:''//网络json地址
    })
    this.anim[2] = lottie.loadAnimation({
      container: document.getElementById("s-b-img3"),//当前需要渲染的DOM
      renderer: "svg",//渲染方式，默认为svg,还可以渲染为html和canvas
      loop: true,//循环播放
      autoplay: true,//自动播放
      // animationData和path二选一
      animationData: gif3.default,//本地动画
      //2. path:''//网络json地址
    })
    this.anim[3] = lottie.loadAnimation({
      container: document.getElementById("s-b-img4"),//当前需要渲染的DOM
      renderer: "svg",//渲染方式，默认为svg,还可以渲染为html和canvas
      loop: true,//循环播放
      autoplay: true,//自动播放
      // animationData和path二选一
      animationData: gif4.default,//本地动画
      //2. path:''//网络json地址
    })
    this.anim[4] = lottie.loadAnimation({
      container: document.getElementById("s-b-img5"),//当前需要渲染的DOM
      renderer: "svg",//渲染方式，默认为svg,还可以渲染为html和canvas
      loop: true,//循环播放
      autoplay: true,//自动播放
      // animationData和path二选一
      animationData: gif5.default,//本地动画
      //2. path:''//网络json地址
    })

    for (let i = 0; i < this.anim.length; i++) {
      this.anim[i].stop()
    }
  },
}
</script>

<style scoped>

#s-b-el-menu {
  margin-top: 20px;
  margin-left: 30px;
  width: 230px;
  height: 400px;
  border-radius: 20px;
  border: none;
  box-shadow: 0px 0px 10px 0px #eeeeee;
}

.user_center_side_bar {
  padding: 0;
  margin: 0;
  height: 100%;
  color: #703CF6;
  font: 14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.s-b-item {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
}

span {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 3px;
  display: inline-block;
  color: black;
  margin-top: 50px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.s-b-img {
  width: 36px;
  height: 36px;
  display: inline-block;
  margin-right: 20px;
}

#s-b-img1 {
  margin-top: -40px;
  /*background-image: url(@/assets/20-bookmark.svg)*/
}

#s-b-img2 {
  margin-top: -40px;
  /*background-image: url(@/assets/47-chat.svg)*/
}

#s-b-img3 {
  margin-top: -40px;
  /*background-image: url(@/assets/17-assignment.svg)*/
}

#s-b-img4 {
  margin-top: -40px;
  /*background-image: url(@/assets/70-ticket.svg)*/
}

#s-b-img5 {
  margin-top: -40px;
  /*background-image: url(@/assets/58-call-phone.svg)*/
}


</style>
